import NavBar from '@/components/NavBar'
import React, { useState } from 'react'
import styles from './index.module.scss'
import Input from '@/components/Input'
import Textarea from '@/components/Textarea'
import { useSelector } from 'react-redux'

export default function EditInput({ onClose, type, onSubmit }) {
  const profile = useSelector((state) => state.profile.profile)
  const [value, setValue] = useState(profile[type] || '')

  return (
    <div className={styles.root}>
      <NavBar
        className="navbar"
        onLeftClick={onClose}
        rightContent={<span className="commit-btn">提交</span>}
        onRightClick={() => onSubmit(type, value)}
      >
        编辑{type === 'name' ? '昵称' : '简介'}
      </NavBar>
      <div className="content">
        <h3>{type === 'name' ? '昵称:' : '简介:'}</h3>

        {type === 'name' ? (
          <Input
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder="请输入昵称"
          ></Input>
        ) : (
          <Textarea
            className="my-text"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            maxLength={200}
            placeholder="请输入简介"
          ></Textarea>
        )}
      </div>
    </div>
  )
}
